<template>
  <div id="app">
    <div class="container">
      <ul class="info-list">
        <li v-for="info in list" :key="info.id" class="info-list-item">
          <img v-lazy="info.img" class="info-img" alt="">

          <div class="info-right">
            <h3 class=info-title>{{info.name}}</h3>
            <p class=info-user>彭于晏</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    async getDataList() {
      const {data} = await axios('http://localhost:3000/images')
      this.list = data.data || []
    }
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
ul,ol {
  list-style: none;
}
html,
body,
#app {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #eae8e8;
}

.container {
  overflow-y: auto;
  width: 100%;
  height: 100%;
  background-color: #eae8e8;
  .info-list {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #eae8e8;
    .info-list-item {
      display: flex;
      align-items: flex-start;
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
      padding: 10px;
      box-sizing: border-box;
      border-radius:5px;
      background-color: #fff;
      .info-img {
        width: 100px;
        height: 100%;
      }
      .info-right {
        flex: 1;
        margin-left: 10px;
        .info-title {
          font-size: 15px;
        }
      }
    }
  }
}
</style>
